<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统主页</title>
    <script src="static/js/vendor/jquery-3.0.0.min.js"></script>
    <link rel="stylesheet" href="/static/css/main.css">
</head>
<body>
    <!-- 头部图片 -->
    <div class="header-image">
        <img src="/static/img/main_top.png" alt="头部图片">
    </div>

    <!-- 人脸识别复选框 -->
    <div class="face-checkbox">
        <label>
            <input type="checkbox" class="face-block"> 人脸识别
            <a href={{ url_for(".logout") }}>退出</a>
        </label>
    </div>

    <!-- 主容器 -->
    <div class="main-container">
        <!-- 左侧导航 -->
        <div class="sidebar">
            <button class="nav-button active" data-target="description">说明</button>
            <button class="nav-button" data-target="account">用户账号</button>
            <button class="nav-button" data-target="setip">配置ip</button>
            <button class="nav-button" data-target="manual">手动调整</button>
            <button class="nav-button" data-target="log">自检记录</button>
            <button class="nav-button" data-target="secret">AI Secret Key注册</button>
            <button class="nav-button" data-target="persona">拟人化</button>
        </div>

        <!-- 右侧内容 -->
        <div class="content">
            <div id="description" class="content-section active">
                <h2>系统说明</h2>
                <p>这里是系统使用说明...</p>
            </div>
            <div id="account" class="content-section">
                <h2>用户账号管理</h2>
                <!--插入循环表格-->
                <table>
                    <tr>
                        <th>序号</th>
                        <th>name</th>
                        <th>email</th>
                        <th>password</th>
                        <th></th>
                    </tr>
                    {% for user in users%}
                    <tr>
                        <td>{{ loop.index }}</td>
                        <td>{{ user.name }}</td>
                        <td>{{ user.email }}</td>
                        <td>******</td>
                        <td>
                            <button class="user-opt del-user" id="{{ loop.index }}">删除用户</button>
                        </td>
                    </tr>
                    {% endfor %}
                </table>
            </div>
            <div id="setip" class="content-section">
                <h2>管理ip地址</h2>
                <div>
                    <p>ip地址：{{ ip[0] }}</p>
                </div>
            </div>
            <div id="manual" class="content-section">
                <h2>手动调整设置</h2>
                <p>手动调整参数...</p>
            </div>
            <div id="log" class="content-section">
                <h2>系统自检记录</h2>
                <p>历史记录查询...</p>
            </div>
            <div id="secret" class="content-section">
                <h2>AI Secret Key注册</h2>
                <p>密钥管理界面...</p>
            </div>
            <div id="persona" class="content-section">
                <h2>拟人化设置</h2>
                <p>个性化配置...</p>
            </div>
        </div>
    </div>

    <script>
        // 导航切换功能
        document.querySelectorAll('.nav-button').forEach(button => {
            button.addEventListener('click', function() {
                // 移除所有active类
                document.querySelectorAll('.nav-button').forEach(btn => btn.classList.remove('active'));
                document.querySelectorAll('.content-section').forEach(section => section.classList.remove('active'));
                
                // 添加active类
                this.classList.add('active');
                const target = this.dataset.target;
                document.getElementById(target).classList.add('active');
            });
        });

        // $("#del-user").click(function(e){
        $(document).on('click', '.del-user', function(e) {
            console.log(e.target.id);
            var id = e.target.id;
            const userData = {{ users | tojson | safe}};
            
            var email = userData[id-1].email;
            var user = userData[id-1].name;

            $.ajax({
                url: '{{ url_for('.modify') }}',            //向服务器请求的url, 必须
                type: 'post',       //必须
                data: {             //传给服务器的数据, 必须
                    'email':email,
                    'user':user,
                },
                success: function(data){        //后端服务器响应之后，执行此代码, 必须
                    state = data.status;
                    errmsg = data.errmsg;
                    alert(errmsg);

                    if (state==0){
                        setTimeout(function(){
                            window.location.href = "{{ url_for('.index') }}";
                        });
                    }
                }
            });
        })
    </script>
</body>
</html>